<template>
	<view class="page">
		<view class="step-bar">
			<u-steps :current="current" activeColor="#32C59A">
				<u-steps-item title="预约服务"></u-steps-item>
				<u-steps-item title="在线支付"></u-steps-item>
				<u-steps-item title="待服务"></u-steps-item>
				<u-steps-item title="服务中"></u-steps-item>
				<u-steps-item title="服务完成" v-if="list.status != 90 && list.status != 91 && list.status != 99"></u-steps-item>
				<u-steps-item title="退款中" v-if="list.status == 90 || list.status == 91"></u-steps-item>
				<u-steps-item title="退款完成" v-if="list.status == 90 || list.status == 91"></u-steps-item>
				<u-steps-item title="已取消" v-if="list.status == 99"></u-steps-item>
			</u-steps>
		</view>
		<view class="to-be-paid">
			<view class="state">{{ list.status | formatStatus }}</view>
			<view class="time-remaining" v-if="list.status == 0">
				请在
				<text>{{ list.overTime }}</text>
				内完成支付，超时订单将自动关闭
			</view>
			<view class="time-remaining" v-if="list.escortName && list.status !== 0 && list.status !== 3">{{ list.status | nameType(this) }}</view>
		</view>
		<!-- 预约信息 -->
		<view class="booking-info">
			<view class="top-booking-title">
				<view class="line"></view>
				<view class="title">预约信息</view>
			</view>
			<view class="booking-list">
				<view class="booking-item">
					<view>预约服务</view>
					<text class="right">{{ list.serviceName }}</text>
				</view>
				<view class="booking-item" v-if="list.treatmentTime">
					<view>期望服务时间</view>
					<text class="right">{{ list.treatmentTime }}</text>
				</view>
				<view class="booking-item" v-if="list.patientName">
					<view>服务对象</view>
					<text class="right">
						{{ list.patientName }} {{ list.patientSex == 1 ? '男' : '女' }}
						<text v-if="list.patientAge">{{ list.patientAge }}岁</text>
					</text>
				</view>
				<view class="booking-item" v-if="list.serviceAddress">
					<view>服务地址</view>
					<text class="right">{{ list.serviceAddress }}</text>
					<view class="copy" @click="copy(list.serviceAddress)">复制</view>
				</view>
				<view class="booking-item" v-if="list.telephone">
					<view>联系电话</view>
					<text @click="call(list.telephone)" class="right">{{ list.telephone }}</text>
					<view class="copy" @click.stop="copy(list.telephone)">复制</view>
				</view>
				<view class="booking-item" v-if="list.hospitalName">
					<view>就诊医院</view>
					<text class="right">{{ list.hospitalName }}</text>
				</view>
				<view class="booking-item" v-if="list.serviceRequirements">
					<view>其他需求</view>
					<text class="right">{{ list.serviceRequirements || '无' }}</text>
				</view>
			</view>
		</view>

		<view class="booking-info">
			<view class="top-booking-title">
				<view class="line"></view>
				<view class="title">订单信息</view>
			</view>
			<view class="booking-list">
				<view class="booking-item" v-if="list.receiverName">
					<view>收货人姓名</view>
					<text class="right">{{ list.receiverName }}</text>
					<view class="copy" @click="copy(list.receiverName)">复制</view>
				</view>
				<view class="booking-item" v-if="list.receiverPhone">
					<view>收货人手机号</view>
					<text @click="call(list.receiverPhone)" class="right">{{ list.receiverPhone }}</text>
					<view class="copy" @click.stop="copy(list.receiverPhone)">复制</view>
				</view>
				<view class="booking-item" v-if="list.receiverAddress">
					<view>收货人地址</view>
					<text class="right">{{ list.receiverProvinceName }}{{ list.receiverCityName }}{{ list.receiverAreaName }}{{ list.receiverAddress }}</text>
					<view class="copy" @click="copy(list.receiverProvinceName + list.receiverCityName + list.receiverAreaName + list.receiverAddress)">复制</view>
				</view>
				<view class="booking-item" v-if="list.createTime">
					<view>下单时间</view>
					<text class="right">{{ list.createTime }}</text>
				</view>
				<view class="booking-item" v-if="list.payAmount">
					<view>应付金额</view>
					<text class="right">{{ list.payAmount }}元</text>
				</view>
				<view class="booking-item" v-if="list.orderSn">
					<view>订单编号</view>
					<text class="right">{{ list.orderSn }}</text>
					<view class="copy" @click="copy(list.orderSn)">复制</view>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.payTime">
					<view>支付时间</view>
					<text class="right">{{ list.payTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.escortName">
					<view>陪诊师</view>
					<text class="right">{{ list.escortName }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.status != 1 && list.serviceStartTime">
					<view>服务开始时间</view>
					<text class="right">{{ list.serviceStartTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.status != 1 && list.serviceEndTime">
					<view>服务结束时间</view>
					<text class="right">{{ list.serviceEndTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status == 90 || (list.status == 91 && list.refundStartTime)">
					<view>退款开始时间</view>
					<text class="right">{{ list.refundStartTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status == 90 || (list.status == 91 && list.refundEndTime)">
					<view>退款完成时间</view>
					<text class="right">{{ list.refundEndTime }}</text>
				</view>
				<view class="booking-item" v-if="list.takingMedicine">
					<view>服用药品</view>
					<text class="right">{{ list.takingMedicine }}</text>
				</view>
				<view class="booking-item" v-if="list.medicationTime">
					<view>服药时间</view>
					<text class="right">{{ list.medicationTime }}</text>
				</view>
				<view class="booking-item" v-if="list.nextInspectionTime">
					<view>下次检查时间</view>
					<text class="right">{{ list.nextInspectionTime }}</text>
				</view>
				<view class="booking-item" v-if="list.serviceRecord">
					<view>服务记录</view>
					<text class="right">{{ list.serviceRecord }}</text>
				</view>
				<view class="booking-imgs" v-if="list.imageList">
					<view class="title">服务记录图片</view>
					<view class="img-list"><image v-for="(item, index) in list.imageList" :src="item"></image></view>
				</view>
			</view>
		</view>

		<!-- 底部预约服务 -->
		<view class="bottom-fixed-box">
			<view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view @click="customer">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @click="HCustomer">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</view>
				<!-- #endif -->
			</view>
			<view>
				<view class="serve-btn" v-if="list.status == 0" @click="requestPay(list)">立即支付</view>
				<view class="serve-btn" v-if="list.status == 1 || list.status == 2" @click="cancel(list)">取消订单</view>
				<view class="serve-btn" v-if="list.status == 3 && !list.isAppraisal && list.escortName" @click="appraise(list)">评价</view>
			</view>
		</view>
		<code-popup ref="popup"></code-popup>
	</view>
</template>

<script>
import CodePopup from '@/components/codePopup.vue';
import { getOrderDetail, getPayParams, cancelOrder } from '@/apis/request.js';
export default {
	components: {
		CodePopup
	},
	data() {
		return {
			orderId: '',
			list: {},
			current: 0,
			sweixin: null
		};
	},
	filters: {
		nameType(status, that) {
			if (status == 1) {
				return '由陪诊师: ' + that.list.escortName + '服务中，如需帮助可咨询客服';
			} else if (status == 2) {
				return '由陪诊师: ' + that.list.escortName + '服务中，如需帮助可咨询客服';
			} else if (status == 3) {
				return '由陪诊师: ' + that.list.escortName + '服务中，如需帮助可咨询客服';
			} else if (status == 90) {
				return '客户退款中，如需帮助可咨询客服';
			} else if (status == 91) {
				return '客户退款完成，如有问题可咨询客服';
			} else if (status == 99) {
				return '客户取消订单，订单金额按下单规则退回';
			}
		},
		formatStatus(status) {
			if (status == 0) {
				return '待支付';
			} else if (status == 1) {
				return '待服务';
			} else if (status == 2) {
				return '服务中';
			} else if (status == 3) {
				return '服务完成';
			} else if (status == 90) {
				return '退款中';
			} else if (status == 91) {
				return '退款完成';
			} else if (status == 99) {
				return '已取消';
			}
		}
	},
	onLoad(options) {
		this.orderId = options.orderId;
		this.getList();
		// #ifdef APP-PLUS
		this.getPlus();
		// #endif
	},
	onUnload() {
		clearTimeout();
	},
	methods: {
		copy(data) {
			uni.setClipboardData({
				data: data,
				success: res => {
					this.$Toast('复制成功');
				}
			});
		},
		HCustomer() {
			this.$refs.popup.show = true;
		},
		//获取详情
		getList() {
			getOrderDetail({
				orderId: this.orderId
			}).then(res => {
				if (res.status == 0) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.dinTime(res);
				} else {
					uni.hideLoading();
					this.list = res;
					if (res.serviceRecordImage) {
						this.list.imageList = res.serviceRecordImage.split(',');
					}
				}
				this.headLand(res.status);
			});
		},
		call(phone) {
			let phoneNum = [];
			phoneNum.push(phone);
			uni.showActionSheet({
				itemList: phoneNum,
				success: function(res) {
					uni.makePhoneCall({
						phoneNumber: phoneNum[0]
					});
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		},
		/**
		 * 请求支付
		 * @param {Object} order 订单数据
		 */
		requestPay(order) {
			console.log(order);
			getPayParams({
				orderId: order.id,
				payType: 2,
				source: 1,
				totalAmount: order.payAmount
			}).then(res => {
				this.callPay(res.wxPayRequest || {});
			});
		},
		/**
		 * 发起支付请求
		 * @param {Object} config 支付配置
		 */
		callPay(config) {
			let that = this;
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: config.timeStamp,
				nonceStr: config.nonceStr,
				package: config.packageValue,
				signType: config.signType,
				paySign: config.paySign,
				success: res => {
					clearTimeout();
					that.getList();
				},
				fail: err => {
					console.error('fail:' + JSON.stringify(err));
					this.$Toast('支付失败');
				}
			});
		},
		//取消订单
		cancel(item) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否取消订单',
				success: res => {
					if (res.confirm) {
						cancelOrder({
							orderId: item.id
						}).then(res => {
							uni.navigateBack();
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		headLand(status) {
			if (status == 0) {
				this.current = 1;
			} else if (status == 1) {
				this.current = 2;
			} else if (status == 2) {
				this.current = 3;
			} else if (status == 3) {
				this.current = 4;
			} else if (status == 3) {
				this.current = 4;
			} else if (status == 90) {
				this.current = 4;
			} else if (status == 91) {
				this.current = 5;
			} else if (status == 99) {
				this.current = 4;
			}
		},
		//倒计时任务
		dinTime(item) {
			let that = this;
			setTimeout(function() {
				if (new Date(item.payExpiredTime).getTime() < new Date().getTime()) {
					clearTimeout();
					uni.navigateBack();
				} else {
					item.overTime = that.showTimes(item.payExpiredTime);
					that.list = item;
					uni.hideLoading();
					that.dinTime(item);
				}
			}, 1000);
		},
		//评论
		appraise(item) {
			clearTimeout();
			uni.navigateTo({
				url: '/pages/MinePages/order/evaluation?orderId=' + item.id + '&name=' + item.escortName + '&escortId=' + item.escortId
			});
		},
		// 倒计时
		showTimes(overTime) {
			overTime = overTime.replace(/\-/g, '/');
			var nowtime = new Date(), //获取当前时间
				endtime = new Date(overTime), //定义结束时间
				rutTime = '';
			var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
				leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
				lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24), //计算小时数
				leftm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
				lefts = Math.floor((lefttime / 1000) % 60); //计算秒数
			if (leftd < 1) {
				rutTime = lefth + '小时' + leftm + '分钟' + lefts + '秒';
			} else {
				rutTime = leftd + '天' + lefth + '小时' + leftm + '分钟' + lefts + '秒';
			}
			return rutTime; //返回倒计时的字符串
		},
		customer() {
			this.sweixin.launchMiniProgram({
				id: 'gh_40c57493134e' //要跳转小程序的原始ID
			});
		},
		getPlus() {
			//获取当前显示的webview
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			//调用H5+APP的扩展API
			var shares = null;
			let that = this;
			var pusher = plus.share.getServices(
				function(s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
					that.sweixin = shares['weixin'];
				},
				function(e) {
					console.log('获取分享服务列表失败：' + e.message);
				}
			);
			//放入当前的webview
			currentWebview.append(pusher);
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;
	padding-bottom: 150rpx;

	.step-bar {
		background-color: #fff;
		padding: 30rpx;
	}

	.to-be-paid {
		width: 750rpx;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #32C59A;

		.state {
			font-size: 34rpx;
			color: #fff;
		}

		.time-remaining {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #fff;

			text {
				color: #ff290b;
			}
		}
	}

	.booking-info {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.top-booking-title {
			display: flex;
			align-items: center;

			.line {
				margin-top: 4rpx;
				width: 6rpx;
				height: 30rpx;
				border-radius: 4rpx;
				background: #32C59A;
			}

			.title {
				font-size: 32rpx;
				margin-left: 10rpx;
			}
		}

		.booking-item {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #020202;

			.right {
				flex: 1;
				text-align: right;
				color: #999999;
			}
			.copy {
				flex-shrink: 0;
				margin-left: 10upx;
				padding: 2upx 10upx;
				color: $uni-color-primary;
				font-size: 22upx;
				border: 1upx solid $uni-color-primary;
				border-radius: 22upx;
			}
		}
		.booking-imgs {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #020202;

			.title {
			}
			.img-list {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin: 18rpx 18rpx 0 0;
				}
			}
		}
	}

	.bottom-fixed-box {
		box-sizing: border-box;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.icon {
			height: 42rpx;
			width: 42rpx;
		}

		.text {
			font-size: 20rpx;
		}

		.serve-btn {
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			background: #32C59A;
			font-size: 28rpx;
			color: #fff;
		}
	}
}

/deep/ .u-back-text {
	min-width: 70rpx;
}

button::after {
	border: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	background-color: #fff;
}
</style>
